<template>
  <div
    :class="className"
    ref="chartDiv"
    :style="{ height: height, width: width }"
  />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize.js";

const animationDuration = 6000;

export default {
  name: "RuoyiUiChartManage",
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      const size = this.$refs.chartDiv.offsetWidth;
      this.chart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          y: "center", //延Y轴居中
          //x: 'right', //居右显示
          left: "5%",
          orient: "vertical", //垂直显示
          align: "left",
          //图例每项之间的间隔
          itemGap: size / 150,
          //selectedMode: false,
          textStyle: {
            //图例文字的样式
            fontSize: size / 25,
          },
          // formatter: function (name) {

          //     if (name == '计划项目') {
          //         return name + ':' + 50;
          //     } else if (name == '科技企业') {
          //         return name + ':' + 2;
          //     } else if (name == '创新载体') {
          //         return name + ':' + 3;
          //     } else if (name == '人才团队') {
          //         return name + ':' + 4;
          //     } else {
          //         return name;
          //     }
          // },
        },
        series: [
          {
            type: "pie",
            center: ["70%", "50%"],
            radius: ["55%", "70%"],
            avoidLabelOverlap: false,
            label: {
              //扇形中心文字
              show: true,
              position: "center",
              formatter: "",
              fontSize: size / 30,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1, name: "计划项目", itemStyle: { color: "#026ECB" } },
              { value: 2, name: "科技企业", itemStyle: { color: "#67C23A" } },
              { value: 3, name: "创新载体", itemStyle: { color: "#FAC858" } },
              { value: 4, name: "人才团队", itemStyle: { color: "#F35656" } },
              { value: 5, name: "科技成果", itemStyle: { color: "#2493B6" } },
              { value: 6, name: "其他补助", itemStyle: { color: "#E4A517" } },
            ],
          },
        ],
      });
    },
  },
};
</script>
